<template>
  <div>
    <div style="height:44px;">
      <sticky scroll-box="vux_view_box_body" ref="sticky" :offset="0" :check-sticky-support="false" :disabled="disabled">
        <tab :line-width="1">
          <tab-item selected>
            <span @click="aa()">全部工厂</span>
          </tab-item>
          <tab-item>
            <span @click="aa()">普通工厂</span>
          </tab-item>
          <tab-item>
            <span @click="aa()">优质工厂</span>
          </tab-item>
        </tab>
      </sticky>
    </div>
    <scroller lock-x :height="h" use-pulldown :pulldown-config="pulldownDefaultConfig" @on-scroll-bottom="onScrollBottom" @on-pulldown-loading="onScrollTop" ref="scrollerBottom" :scroll-bottom-offst="200">
      <div>
        <div v-for="i in bottomCount " :key="i.index" class="box2 flexbox">

          <div class="img">
            <div>
             <img src="" alt="">
            </div>
          </div>
          <div class="content">
            <p class="name">易树加工厂<span>查看详情</span></p>
            <div class="size"><p><rater v-model="data4" disabled  :font-size="15"></rater>三星工厂</p>
            <p>大型</p>
            </div>
            <p class="advantage">生产优势：监控类，电子类，飞行科技类</p>
          </div>

        </div>
        <load-more tip="加载中"></load-more>
      </div>

    </scroller>

  </div>
</template>

<script>
import {
  Tab,
  TabItem,
  Sticky,
  Scroller,
  LoadMore,
  Cell,
  Flexbox,
  FlexboxItem,
  Rater
} from "vux";
const pulldownDefaultConfig = {
  content: "下拉刷新",
  height: 40,
  autoRefresh: false,
  downContent: "下拉刷新",
  upContent: "释放后刷新",
  loadingContent: "正在刷新...",
  clsPrefix: "xs-plugin-pulldown-"
};
export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    Scroller,
    LoadMore,
    Cell,
    Flexbox,
    FlexboxItem,
    Rater
  },
  data() {
    return {
      showSpace: false,
      disabled:
        typeof navigator !== "undefined" &&
        /iphone/i.test(navigator.userAgent) &&
        /ucbrowser/i.test(navigator.userAgent),
      onFetching: false,
      bottomCount: 8,
      pulldownDefaultConfig: pulldownDefaultConfig,
      h: "-40",
      data4: 3,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.scrollerBottom.reset({ top: 0 });
    });
  },
  methods: {
    spaceChange() {
      this.showSpace = !this.showSpace;
      this.$nextTick(() => {
        this.$refs.sticky.bindSticky();
      });
    },
    onScrollBottom() {
      if (this.onFetching) {
        // do nothing
      } else {
        this.onFetching = true;
        setTimeout(() => {
          this.bottomCount += 10;
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset();
          });
          this.onFetching = false;
        }, 2000);
      }
    },
    onScrollTop() {
      setTimeout(() => {
        this.bottomCount = 8;
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
          this.$refs.scrollerBottom.donePulldown();
        });
      }, 2000);
    },
    aa() {
      setTimeout(() => {
        this.bottomCount = 8;
        var top = document.querySelector(".xs-container");
        top.setAttribute(
          "style",
          "transform-origin: 0px 0px 0px; transform: translateX(0px) translateY(40px) translateZ(0px) scale(1, 1); transition: none;"
        );
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
          this.$refs.scrollerBottom.donePulldown();
        });
      }, 1000);
    }
  }
};
</script>
<style scoped>
.box2 {
  padding: 5px 10px;
  border-bottom: 1px solid #ddd;
}
.flexbox {
  display: flex;
  /* justify-content: space-between; */
  padding: 10px 5%;
}

.flexbox .img {

  text-align: center;
}
.flexbox .img div{
  margin: 0 auto;
width: 70px;
height:70px;
background-color: aqua;
}
.flexbox .img div img{
  width: 100%;
  height: 100%;
}
.flexbox .content {
  width: 100%;
  font-size: 12px;
  padding-left: 7%;
}
.flexbox .content p.name{
  font-size: 16px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;

}
.flexbox .content p.name span{
  color: rgb(145, 138, 138);
  font-size: 12px;
}
.flexbox .content .size{
  display: flex;
  justify-content: space-between;
  color: rgb(145, 138, 138);
}
.flexbox .content p.advantage{
 color: rgb(63, 60, 60);
}
</style>